<template>
    <div class="settle-account">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
            <el-form-item label="景区名称">
                <el-input v-model="formInline.scenicName" placeholder="景区名称"></el-input>
            </el-form-item>
            <!--<el-form-item label="会员ID">-->
                <!--<el-input v-model="formInline.ecardCode" placeholder="会员ID"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button type="primary" @click="onSearch">下载</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border highlight-current-row size="small" width="100%">
            <el-table-column label='景区名称' prop="scenicName"></el-table-column>
            <el-table-column label="入园次数" align="center" prop="entryNum" width="100"></el-table-column>
            <el-table-column label="积分" align="center" prop="integral" width="100"></el-table-column>
            <el-table-column label="应结算价（元）" align="center" prop="amount"></el-table-column>
            <el-table-column label="保底价（元）" align="center" prop="baseAmount"></el-table-column>
            <el-table-column label="保底价-应结算价（元）" align="center" prop="diffAmount"></el-table-column>
            <el-table-column label="已结算金额（元）" align="center" prop="settledeAmount"></el-table-column>
            <el-table-column label="未结算金额（元）" align="center" prop="unSettledeAmount"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="style-a">
                        <a href="javascript:void(0);" @click="openModifySettledAmountDialog(scope.row.scenicId)">修改已结算金额</a>
                        <a href="javascript:void(0);" @click="checkDetail(scope.row, scope.row.scenicId)">查看详情</a>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!--修改已结算金额弹窗-->
        <el-dialog
                size="small"
                title="修改已结算金额"
                width="600px"
                @close="closeDialog('modifyAmountForm')"
                :visible.sync="modifyDialogVisible">
            <el-form label-width="100px" :inline="false" :model="modifyAmountForm" ref="modifyAmountForm" class="demo-form-inline" size="small">
                <el-form-item label="已结算金额" prop="amount"
                              :rules="[{validator:valiSettledAmount, trigger:'blur'},
                              {required:true, message:'已结算金额不能为空', trigger:'blur'}]">
                    <el-input v-model="modifyAmountForm.amount" placeholdder=""></el-input>
                </el-form-item>
                <el-form-item label="修改历史" prop="amount"></el-form-item>
            </el-form>
            <el-table :data="logList" border highlight-current-row size="small">
                <el-table-column label='操作时间' min-width="150" prop="cTStr"></el-table-column>
                <el-table-column label="操作人" min-width="100" align="center" prop="cUName"></el-table-column>
                <el-table-column label="结算金额" min-width="120" align="center" prop="amount"></el-table-column>
            </el-table>
            <el-pagination
                    layout="total, prev, pager, next, jumper"
                    :total="innerTotal"
                    :page-size="innerPageSize"
                    :current-page="innerPageNum"
                    @current-change="handleInnerChangePage">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="validModifyAmountForm('modifyAmountForm')" size="small">确 定</el-button>
                <el-button @click="modifyDialogVisible = false" size="small">取 消</el-button>
            </span>
        </el-dialog>

        <el-pagination
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handleChangePage">
        </el-pagination>
    </div>
</template>
<script>
	import { getSettleReportList, modifySettledAmount, getSettledReportLog } from '@/api/settleAccountReport'
//	import { formatDate } from '@/utils/utils'
	import { Message } from 'element-ui'
	export default {
		data() {
			let settledAmountValidation = (rule, value, callback) => {
				let reg = /^[0-9]{1,8}([.][0-9]{1,2})?$/
				if (!reg.test(value) && value) {
					callback(new Error('请输入数字（小数点后最多两位）'))
					return
				}
//				if (this.prdAddForm.serviceCharge != '') {
//					if (parseFloat(this.prdAddForm.serviceCharge) < parseFloat(value)) {
//						callback(new Error('返现金额不得大于服务费' + this.prdAddForm.serviceCharge))
//						return
//					}
//				}
				callback()
			}
			return {
				list: [],
				listLoading: false,
				formInline: {
					ecardCode: '',
					scenicName: ''
				},
                valiSettledAmount: settledAmountValidation,
				total: null,
				currentPage: 1,
				pageSize: 20,
                // 修改已结算金额
				modifyDialogVisible: false,
				modifyAmountForm: {
					amount: null
                },
				scenicId: null,
                innerTotal: null,
				innerPageNum: 1,
				innerPageSize: 20,
				logList: []
			}
		},
		created() {
			this.fetchData()
		},
		methods: {
			fetchData() {
				this.listLoading = true
				let formInline = this.formInline
				let params = {
					ecardCode: formInline.ecardCode,
					scenicName: formInline.scenicName,
					pageNumber: this.currentPage,
					pageSize: this.pageSize
				}
				getSettleReportList(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.list = data.body.list
						this.total = data.body.total
					}
				}).catch(() => {
					this.listLoading = false
				})
			},
			onSearch() {
				this.fetchData()
			},
			handleChangePage(val) {
				this.currentPage = val
				this.fetchData()
			},
			handleInnerChangePage(val) {
				this.innerPageNum = val
				this.getSettledReportLog()
			},
			closeDialog(formName) {
				this.$refs[formName].resetFields()
            },
			checkDetail(rowData, scenicId) {
				window.sessionStorage.setItem('listRowData', JSON.stringify(rowData))
				this.$router.push({ path: '/financeManage/settleAccountDetail', query: { scenicId: scenicId }})
            },
			openModifySettledAmountDialog(scenicId) {
				this.scenicId = scenicId
                this.modifyDialogVisible = true
                this.getSettledReportLog()
            },
			getSettledReportLog() {
				let params = {
					scenicId: this.scenicId,
                    pageNumber: this.innerPageNum,
                    pageSize: this.innerPageSize
				}
				getSettledReportLog(params).then(res => {
					let data = res.data
					if (data.errorCode === 'E_000') {
						this.logList = data.body.list
						this.innerTotal = data.body.total
					}
				})
            },
            validModifyAmountForm(formName) {
	            this.$refs[formName].validate((valid) => {
		            if (valid) {
			            this.modifySettledAmount()
		            } else {
			            return false
		            }
	            })
            },
			modifySettledAmount() {
				let params = {
					amount: this.modifyAmountForm.amount,
					scenicId: this.scenicId
				}
				this.listLoading = true
				modifySettledAmount(params).then(res => {
					let data = res.data
					this.listLoading = false
					if (data.errorCode === 'E_000') {
						this.modifyDialogVisible = false
							Message({
							message: data.message,
							type: 'success',
							duration: 2 * 1000
						})
						this.fetchData()
					}
				}).catch(() => {
					this.listLoading = false
                })
            }
		}
	}
</script>
<style lang="scss">
    .settle-account{
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 8px;
        }
        .el-dialog__body{
            padding-top: 10px;
        }
        .el-table__header-wrapper{
            overflow: visible;
        }
        .verify-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
        .el-table{
            overflow: visible !important;
            .el-input__inner{
                text-align: center;
            }
        }
        .el-table .el-table__body-wrapper {
            overflow: visible;
        }
        .el-table .cell {
            padding: 0 4px;
            overflow: visible;
        }
        .el-dialog{
            .el-form-item--small .el-form-item__label {
                text-align: left;
            }
        }
    }
</style>
